<template>
    <div>
        <!-- 搜索框 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" @click='searchFn' shape='round'/>
        <!-- 左侧栏 -->
        <van-sidebar v-model="active">
            <van-sidebar-item :title="item.name" v-for="item in dataArr" :key='item.id' @click='change(item.id)'/>
        </van-sidebar>
        <!-- 右侧 -->
        <div class='right'>
            <div class="header">
                <img :src="part.banner_url" alt="">
                <div>
                    <h5>{{part.front_name}}</h5>
                </div>
            </div>
            <div class="title">
                <span>{{part.name}}</span>
                <hr>
            </div>
            <div class="main">
                <van-grid :column-num="3" :border='false'>
                    <van-grid-item v-for="item1 in part.subCategoryList" :key="item1.id" :icon="item1.wap_banner_url" :text="item1.name" />
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
// 引入搜索，左边栏，宫格
import {Search, Sidebar, SidebarItem,Grid, GridItem } from 'vant';
Vue.use(Search);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Grid);
Vue.use(GridItem);
// 获取当前页的数据，接口
import {currentCategory} from '@/api/category.js'
 
    export default {
        name:'',
        data () {
            return {
                value:'',
                active:'',
                currentId:'1005000',//获取左侧栏对应的id
                part:'',//当前选项的数据
            }
        },
        props:['dataArr'], //父传子（初始化总数居）
        mounted(){
            this.getCurrent()
        },
        methods:{
            getCurrent(){
                currentCategory({id:this.currentId}).then(res=>{
                    this.part = res.data.data.currentCategory
                })
            },
            change(id){
                this.currentId = id
                this.getCurrent()
            },
            // 搜索
            searchFn(){
                this.$router.push('/category/popup')
            }
        }
    }
</script>

<style scoped lang='less'>
.van-sidebar{
    width: 20%;
    float: left;
}
.right{
    width: 80%;
    float: left;
    .header{
        width: 275px;
        height: 140px;
        position: relative;
        margin-left: 15px;
        img{
            width: 100%;
            height: 100%;
            box-shadow: 0 0 0.16rem #000;
            border-radius: 15px;
        };
        div{
            width: 100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
            background: rgba(0,0,0,0.4);
            border-radius: 15px;
            h5{
                position: absolute;
                top: 70px;
                width: 100%;
                height: 24px;
                text-align: center;
                font-size: 16px;
                color: white;
                z-index: 1;
            }
        };    
    }
    .title{
        width: 300px;
        height: 50px;
        position: relative;
        margin-top: 10px;
        span{
            font-size: 16px;
            position: absolute;
            top: 5px;
            left: 105px;
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: white;
            z-index: 1;
        };
        hr{
            width: 150px;
            height: 2px;
            border: none;
            background-color: rgb(204, 204, 204);
            position: absolute;
            top: 20px;
            left: 75px;
        }
    }
}

</style>